<template>
    <div
        class="w100p h50 poa:bl0"
        mox-class="[show-mask] wh100p"
        :class="{'show-mask': isShow}"
        v-if="isSelf"
    >
        <!-- 蒙层 -->
        <van-overlay class="poa zi-4" :show="isShow" @click="isShow = false"></van-overlay>
        <!-- 主体 -->
        <div class="w100p h50 bgc-f0 fxsyc poa:bl0 zi-9" @click="isShow=true">
            <!-- goods列表 -->
            <div class="w100p h400 bgc-f poa:b50 br:tr10 ovy-s" v-if="isShow">
                <!-- 清空按钮 -->
                <div class="h30 w100p bsb px20 fxeye">
                    <van-icon name="delete-o" size="23" @click="reset" />
                </div>
                <!-- 列表 -->
                <div v-for="item in goodslist" :key="item.id">
                    <div class="w200"></div>
                    <van-card
                        :price="item.price"
                        :desc="item.des"
                        :title="item.title"
                        :thumb="item.img"
                        @click.stop
                    >
                        <template #price>
                            <span class="tc-35 t14">￥{{item.price}}</span>
                        </template>
                        <template #num>
                            <van-stepper
                                button-size="26px"
                                :default-value="item.count"
                                disable-input
                                min="0"
                                @change="(v)=>addCount(item, v)"
                            />
                        </template>
                    </van-card>
                </div>
            </div>
            <!-- 微标 -->
            <van-badge
                class="wh50 br50p ml20-b20 fxcyc"
                mox-class="[showtop] poa:t460n"
                :class="{showtop:isShow}"
                :content="count"
                color="#dca974"
            >
                <img @click.stop="isShow = !isShow" class="wh130p" src="../assets/icon/bag.png" alt />
            </van-badge>
            <!-- 价格和结算按钮 -->
            <span class="tc-35 t-b ml20">￥{{price}}</span>
            <div class="w100 h100p bgc-dca974 tc-f fxcyc mla" @click.stop="settlement">结算</div>
        </div>
    </div>
</template>

<script>
import getTime from "@/assets/utils/getTime";
import { Badge, Overlay, Card, Icon, Stepper, Dialog } from "vant";
export default {
    name: "GoodsAction",
    components: {
        VanBadge: Badge,
        VanOverlay: Overlay,
        VanCard: Card,
        VanIcon: Icon,
        VanStepper: Stepper,
        VanDialog: Dialog,
    },
    data() {
        return {
            isSelf: false,
            isShow: false,
        };
    },
    computed: {
        goodslist() {
            return this.$store.getters.getAddCount;
        },
        price() {
            const settlGoods = this.$store.getters.getAddCount;
            return settlGoods.reduce((prev, item) => {
                return prev + item.price * item.count;
            }, 0);
        },
        count() {
            const settlGoods = this.$store.getters.getAddCount;
            return settlGoods.reduce((prev, item) => {
                return prev + item.count;
            }, 0);
        },
    },
    watch: {
        goodslist(newval) {
            if (newval.length == 0) {
                this.isShow = false;
                this.isSelf = false;
            }
            if (newval.length > 0) {
                this.isSelf = true;
            }
        },
    },
    methods: {
        settlement() {
            const settlGoods = this.$store.getters.getAddCount;
            const objtostr = JSON.stringify(settlGoods)
            const order = JSON.parse(objtostr)
            Dialog.confirm({
                message: "支付功能暂未开通,点击下方确认可以添加到订单列表",
                width: "260px",
                confirmButtonColor: "#dca974",
            }).then(() => {
                const time = getTime();
                this.$store.commit("addOrder", { time, goods: order,id: Math.random() });
                this.goodslist.forEach((item) => {
                    const { key, index } = item.mx;
                    item.count = 0;
                    item.id = Math.random();
                    this.$store.commit("updataGoodsItem", {
                        key,
                        index,
                        value: item,
                    });
                });
            });
        },
        addCount(item, v) {
            const { key, index } = item.mx;
            item.count = v;
            item.id = Math.random();
            this.$store.commit("updataGoodsItem", { key, index, value: item });
        },
        reset() {
            Dialog.confirm({
                message: "清空购物袋吗?",
                width: "260px",
                confirmButtonColor: "#dca974",
            }).then(() => {
                this.goodslist.forEach((item) => {
                    const { key, index } = item.mx;
                    item.count = 0;
                    item.id = Math.random();
                    this.$store.commit("updataGoodsItem", {
                        key,
                        index,
                        value: item,
                    });
                });
            });
        },
    },
};
</script>

<style>
/* .van-card{
    height: 60px;
} */
.van-card__title {
    line-height: 20px;
    font-size: 14px;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 6px;
}
/* .van-card__thumb img {
    width: 60px;
    height: 60px;
} */
/* .van-card__content {
    height: 60px;
} */
.van-badge--fixed {
    top: 7px;
    right: 7px;
}
.box-s {
    box-shadow: 0px 0px 15px #ccc;
}
.bg-img {
    background-image: url(../assets/icon/bag.png);
}
</style>